<!-- eslint-disable no-unused-vars -->
<template>
    <div class="app-container">
        <page-main>
            <filter-pane :filter-data="filterData" @filterMsg="filterMsg" />
            <table-pane :data-source="dataSource" @changeSize="changeSize" @changeNum="changeNum" />
        </page-main>
        <!-- 添加或修改积分对话框 -->
        <DialogFrom ref="DialogFrom" type="form" :visible.sync="open" :title="title" width="50%" :items="items"
                    :form="form" @submit="submitForm"
        >
            <template slot="img_name">
                <div>
                    <el-upload ref="uploadFile" class="upload-demo" action="#" :on-preview="handlePicturePreview"
                               :on-remove="delectFile" multiple :http-request="afterRead" :file-list="form.fileList"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </div>
            </template>
        </DialogFrom>
    </div>
</template>

<script>
import filterPane from '@/components/TableDialog/filterPane'
import tablePane from '@/components/TableDialog/tablePane'

// eslint-disable-next-line no-unused-vars
import { getbanner, uploadFile, updatebanner, Addbanner, getCommunityInfoByTenantId, deletebanner, listByGroupName} from '@/util/api'

export default {
    name: 'DynamicShare',
    components: { filterPane, tablePane },
    data() {
        return {
            // 搜索栏配置
            filterData: {
                timeSelect: false,
                elinput: [

                ]
            },
            multipleSelection: [],
            title: '',
            open: false,
            // 表格配置
            dataSource: {
                tool: [{
                    name: '新增',
                    key: 1,
                    permission: 2010701,
                    handleClick: this.handleAdd,
                    bgColor: ''// 自定义按钮背景色
                }, {
                    name: '修改',
                    key: 1,
                    type: 'success',
                    permission: 2010701,
                    handleClick: this.handleAdd,
                    bgColor: ''// 自定义按钮背景色
                }, {
                    name: '删除',
                    key: 1,
                    type: 'danger',
                    permission: 2010701,
                    handleClick: this.handleAdd,
                    bgColor: ''// 自定义按钮背景色
                }],
                data: [], // 表格数据
                cols: [
                    {
                        label: '图片',
                        prop: 'img_name',
                        isImagePopover: true
                    },
                    {
                        label: '标题',
                        prop: 'title'
                    },
                    {
                        label: '简介',
                        prop: 'introduce'
                    }
                ], // 表格的列数据
                handleSelectionChange: data => {
                    console.log(data, 'xiaohe')
                    this.multipleSelection = data
                },
                isSelection: true, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: true, // 列表序号
                loading: true, // loading
                pageData: {
                    total: 0, // 总条数
                    pageSize: 10, // 每页数量
                    pageNum: 1 // 页码
                },
                operation: {
                    // 表格有操作列时设置
                    label: '操作', // 列名
                    width: '100', // 根据实际情况给宽度
                    data: [ // 功能数组
                        {
                            type: 'icon', // 为icon则是图标
                            label: '推荐', // 功能
                            icon: 'iconfont recommend-btn icon-iconkuozhan_tuijianpre',
                            permission: '3010105', // 后期这个操作的权限，用来控制权限
                            handleRow: this.handleRow
                        },
                        {
                            label: '删除', // 操作名称
                            type: 'danger', // 为element btn属性则是按钮
                            permission: '2010702', // 后期这个操作的权限，用来控制权限
                            handleRow: this.handleRow
                        }
                    ]
                }
            },
            // 弹窗表单参数
            form: {
                img_name: '',
                title: '',
                introduce: ''
            },
            isAdd: true,
            // 弹窗输入框配置
            items: [
                {
                    elName: 'slot',
                    span: 12,
                    label: '图片',
                    prop: 'img_name'
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '标题',
                    prop: 'title',
                    rules: [
                        {
                            required: true,
                            message: '请输入标题',
                            trigger: 'blur'
                        }
                    ],
                    attrs: {
                        placeholder: '请输入标题'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        //     return true
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '简介',
                    prop: 'introduce',
                    rules: [
                        {
                            required: false,
                            message: '请输入简介',
                            trigger: 'blur'
                        }
                    ],
                    attrs: {
                        placeholder: '请输入简介'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        //     return true
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                }
            ],
            CommunityList: [],
            dialogAdd: false,
            msg: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        filterMsg() {

        },
        changeSize() {

        },
        changeNum() {

        },
        async afterRead(file) {
            let formData = new FormData()
            formData.append('file', file.file)
            let res = await uploadFile(formData)
            console.log(res)
            this.form.img_name = res.data.data.id
        },
        handlePicturePreview() {

        },
        delectFile() {

        },
        handleAdd(data) {
            this.title = data
            let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
            if (userInfo) {
                for (let i in this.form) {
                    if (userInfo[i]) {
                        this.form[i] = userInfo[i]
                    }
                }
            }
            this.form.cityCode = userInfo.townCode
            if (data === '新增') {
                this.isAdd = true
                // console.log(userInfo)
                this.open = true
                // for (let i in this.form) {
                //     this.form[i] = ''
                // }
                console.log(this.form, 'hzl')
            } else if (data === '修改') {
                this.isAdd = false
                this.open = true
                for (let i in this.form) {
                    this.form[i] = this.multipleSelection[0][i]
                }
                console.log(this.form)
            } else {
                this.$confirm('此操作将永久删除信息, 是否继续?', '提示', {
                    cancelButtonClass: 'btn-custom-cancel',
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    center: true
                })
                    .then(async() => {
                        this.deletebanner()
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            }
        },
        clearData() {
            this.form = {
                img_name: '',
                title: '',
                introduce: ''
            }
        },
        async deletebanner() {
            let res = await deletebanner(this.multipleSelection[0].banner_id)
            if (res.data.meta.status == 201) {
                this.getList()
                this.$message.success('删除成功')
            }
        },
        async submitForm() {
            this.CommunityList.forEach(item => {
                if (this.form.completeCommunityName == item.completeCommunityName) {
                    this.form.completeCommunityId = item.id
                }
            })
            let res = await (this.isAdd ? Addbanner(this.form) : updatebanner(this.multipleSelection[0].banner_id, this.form))
            console.log(res)
            if (res.data.data) {
                this.$message.success(this.title + '成功')
                this.getList()
                this.clearData()
                this.open = false
            }
        },
        getList() {
            this.dataSource.loading = true
            getbanner().then(res => {
                this.dataSource.loading = false
                this.dataSource.pageData.total = res.data.data.length
                this.dataSource.data = res.data.data
                console.log(this.dataSource.data, 'data')
                // if (res.data.data?.pageList.length > 0) {
                //     this.dataSource.pageData.total = res.data.data.totalCount
                //     this.dataSource.data = res.data.data.pageList
                //     console.log(res.data.data.pageList, 'dlksfvmniokredgnm')

                // } else {
                //     this.dataSource.data = []
                //     this.dataSource.pageData.total = 0
                // }
            })
        }
    }
}
</script>

<!-- <style scoped lang='scss'></style> -->
